<template>
  <div class="app-container">
    <el-row>
      <!-- 树结构 -->
      <el-col :span="6" :xs="24">
        <div class="mainbox-left">
          <div class="box-card">
            <leftRoleList ref="roleRef" :name="'角色'" :handle="true"
                          @treeClick="treeClick" @changeStatus="changeStatus" />
          </div>
        </div>
      </el-col>
      <el-col :span="18" :xs="24" style="padding-left: 0px">
        <div class="none2-border3 userlist mainbox">
          <div class="table-container">
            <rightDetailList ref="rightDetaiRef" :role-id="roleId" :role-data="roleData"
                             @getRoleList="getRoleList" />
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import leftRoleList from './components/leftRoleList.vue'
import rightDetailList from './components/rightDetailList.vue'

export default {
  name: 'BussinessRoleManage',
  components: {
    leftRoleList,
    rightDetailList
  },
  dicts: [],

  data() {
    return {
      roleId: '',
      roleData: {}
    }
  },
  methods: {
    treeClick(data) {
      this.roleId = data.roleId
      this.roleData = data
      if (this.roleId) {
        this.$refs.rightDetaiRef.getBaseInfo(this.roleId)
      }
    },
    getRoleList(data) {
      this.$refs.roleRef.getList(data)
    },
    changeStatus(status) {
      this.$refs.rightDetaiRef.getBaseInfo(this.roleId)
    }
  }
}
</script>
<style lang="scss" scoped>

</style>
